<template>
	<view class="">
		<view class="box">
			<view class="info-title">个人信息</view>
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>姓名</text>
				</view>
				<input type="text" v-model="option.name" placeholder="请输入姓名" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>联系方式</text>
				</view>
				<input type="number" v-model="option.mobile" placeholder="请输入手机号" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>银行卡号</text>
				</view>
				<input type="number" v-model="option.account" placeholder="请输入银行卡号" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>开户行</text>
				</view>
				<input type="text" v-model="option.bank" placeholder="请输入开户行" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>身份证</text>
				</view>
				<input type="idcard" v-model="option.code" placeholder="请输入身份证号" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="flex align-c">
					<text class="red">*</text>
					<text>邮寄地址</text>
				</view>
				<input type="text" v-model="option.address" placeholder="请输入常用地址" placeholder-class="p-c" class="f1 info-input" >
			</view>
		</view>
		
		<view class="box">
			<view class="info-title">其他信息</view>
			<view class="info-item flex align-c">
				<view class="">性别</view>
				<view class="info-check">
					<picker mode="selector" :range="arr" range-key="name" @change="checkSex">
						<view class="flex align-c" style="justify-content: flex-end;">
							<view v-if="sexIndex||sexIndex===0">{{ arr[sexIndex].name }}</view>
							<text v-else class="p-c">请选择</text>
							<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
						</view>
					</picker>
				</view>
			</view>
			
			<view class="info-item flex align-c">
				<view class="">职业</view>
				<input type="text" v-model="option.occupation" placeholder="请输入职业" placeholder-class="p-c" class="f1 info-input" >
			</view>
			
			<view class="info-item flex align-c">
				<view class="">婚否</view>
				<view class="info-check">
					<picker mode="selector" :range="marriaList" range-key="name" @change="checkMarried">
						<view class="flex align-c" style="justify-content: flex-end;">
							<view v-if="marriedIndex||marriedIndex===0">{{ marriaList[marriedIndex].name }}</view>
							<text v-else class="p-c">请选择</text>
							<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
						</view>
					</picker>
				</view>
			</view>
			
			<!-- <view class="info-item flex align-c">
				<view class="">生日</view>
				<input type="text" placeholder="请输入生日" placeholder-class="p-c" class="f1 info-input" >
			</view> -->
			
			<view class="info-item flex align-c">
				<view class="">爱好</view>
				<input type="text" v-model="option.hobby" placeholder="请输入爱好" placeholder-class="p-c" class="f1 info-input" >
			</view>
		</view>
		
		<button class="confirm-btn" @click="makeContract">生成合同</button>
		<!-- #ifdef H5 -->
		<button class="confirm-btn" @click="$to(`/pages/home/member/member_inspect?type=${type}&id=${id}`)">生成合同</button>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBar: 0,
				arr: [
					{
						name: '男',
						sex: 1
					},
					{
						name: '女',
						sex: 2
					}
				],
				marriaList: [
					{
						name: '是',
						id: 1
					},
					{
						name: '否',
						id: 2
					}
				],
				marriedIndex: '',
				sexIndex: '',
				option: {
					name: '',
					mobile: '',
					bank: '',
					account: '',
					code: '',
					address: '',
					sex: '',
					occupation: '',
					marriage: '',
					hobby: '',
				},
				shop_id: '',
				isShowProgress: false,
				progress: 0,
				isFlag: true,
				id: '',
				detail: null,
				imgList: [],
				type: '',
				title: '上传合同'
			}
		},
		onLoad(e) {
			this.getSystemInfo();
			this.shop_id = uni.getStorageSync('shopId');
			this.id = e.id;
			this.type = e.type;
			if(this.type == 3) {
				this.getContract();
			}
		},
		methods: {
			getSystemInfo() {
				uni.getSystemInfo({
					success: (e) => {
						this.customBar = e.statusBarHeight + 44;
					}
				})
			},
			checkSex(e) {
				let i = e.detail.value;
				this.sexIndex = i;
				this.option.sex = this.arr[i].sex;
			},
			checkMarried(e) {
				let i = e.detail.value;
				this.marriedIndex = i;
				this.option.marriage = this.marriaList[i].id;
			},
			async makeContract() {
				uni.showLoading()
				let res = await this.$api.post('staff/contract/create',{
					shop_id: this.shop_id,
					user_id: this.id,
					...this.option,
				});
				if(res.code == 200) {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
					});
					uni.redirectTo({
						url: `/pages/home/member/member_inspect?type=${this.type}&id=${res.data.id}`
					})
				}
			},
			async getContract() {
				let res = await this.$api.get(`staff/view/${this.id}`);
				if(res.code == 200) {
					console.log('******',res);
					this.detail = res.data;
					if(res.data&&res.data.file) {
						this.file = res.data.file;
					}
					this.watchDetail();
				}
			},
			watchDetail() {
				const {detail} = this;
				if(detail) {
					this.option = {
						name: detail.name,
						mobile: detail.mobile,
						bank: detail.bank,
						account: detail.account,
						code: detail.code,
						address: detail.address,
						sex: detail.sex,
						occupation: detail.occupation,
						marriage: detail.marriage,
						hobby: detail.hobby,
					};
					this.arr.forEach((v,i) => {
						if(v.sex == detail.sex) {
							this.sexIndex = i;
						}
					});
					this.marriaList.forEach((v,i) => {
						if(v.id == detail.marriage) {
							this.marriedIndex = i;
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #FFF;
		margin: 20rpx 27rpx;
		padding: 25rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
	}
	.info-title {
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	.info-item {
		line-height: 88rpx;
	}
	.info-input {
		margin-left: 40rpx;
		text-align: right;
		font-size: 28rpx;
	}
	.into {
		width: 11rpx;
		height: 19rpx;
		margin-left: 13rpx;
	}
	.info-check {
		flex: 1;
		margin-left: 40rpx;
		text-align: right;
		font-size: 28rpx;
	}
	
	.confirm-btn {
		background-color: #F17816;
		color: #FFF;
		margin: 100rpx 27rpx;
		font-size: 32rpx;
	}
	
	.bg {
		padding: 0 52rpx;
		background-color: #FFF;
		.tit_label {
			font-size: 29rpx;
			height: 78rpx;
			line-height: 78rpx;
			font-weight: bold;
		}
		.contract {
			background-color: #FFF6EF;
			padding: 28rpx;
			font-size: 27rpx;
			.open_btn {
				margin: 0;
				padding: 0;
				height: 40rpx;
				line-height: 40rpx;
				width: 93rpx;
				text-align: center;
				font-size: 24rpx;
				border-radius: 20rpx;
				background-color: #F17816;
				color: #FFF;
			}
		}
		
		.contract_img {
			width: 133rpx;
			height: 133rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
		}
		
		.grid {
			display: grid;
			grid-template-columns: 150rpx 150rpx 150rpx 150rpx;
		}
		.place {
			display: block;
			height: 140rpx;
		}
		.button_box {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			.save_btn {
				margin: 25rpx 27rpx;
				background-color: #F17816;
				color: #FFF;
				font-size: 32rpx;
				height: 90rpx;
				line-height: 90rpx;
			}
		}
	}
	.progress-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, .5);
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.progress-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			.text {
				margin-bottom: 20rpx;
			}
		}
	}
</style>